<template>
  <div class="wrap">
    <nav-bar :title="title">
      <!-- <img src="/img/47.png" slot="screen" class="nav-right" /> -->
    </nav-bar>
    <div class="article_content" v-if="detail" v-html="detail.content"></div>
  </div>
</template>

<script>
import navBar from "@/components/nav-bar";
export default {
    name: 'articleContent',
    data(){
        return {
            detail: undefined
        }
    },
    mounted(){
        if(this.article_id){
            return this.getData()
        }
        this.$router.back(-1)
    },
    methods:{
        getData(){
            this.$store.dispatch('messageDetail', {
                id: this.article_id
            }).then(res => {
                this.detail = res.data.result
            }).catch(e=>{

            })
        }
    },
    computed:{
        article_id(){
            return this.$route.query.article_id || 0
        },
        title(){
            if(this.detail){
                document.title = this.detail.title
                return this.detail.title
            }
            document.title = ''
            return '';
        }
    },
    watch:{
        article_id(){
            this.getData()
        }
    },
    components: {
        navBar
    }
}
</script>

<style lang="less" scoped>
.article_content{
    width: 335px;
    margin: 80px auto;
    line-height: 1.2;
    font-size: 14px;
    img{
        width: 100%;
        margin: 5px 0;
        border-radius: 5px;
    }
}
</style>
